<template>
  <div>
    <el-form :model="user" label-width="400px" class="elform">
      <el-form-item label="用户名">
        <el-input v-model="user.username" type="text" size="30" :maxlength="18" show-word-limit class="input1" placeholder="请输入用户名">
        </el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="user.password" show-password type="password" maxlength="18" class="input1" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item label="确认密码">
        <el-input v-model="user.password1" show-password type="password" maxlength="18" class="input1" placeholder="请输入确认密码"></el-input>
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-model="user.email" class="input1" placeholder="请输入邮箱"></el-input>
      </el-form-item>

      <el-form-item label="手机号" :maxlength="11">
        <el-input v-model="user.phone" class="input1" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item label="职业">
        <el-input v-model="user.occupation" class="input1" placeholder="请输入职业"></el-input>
      </el-form-item>

      <el-form-item label="学校/公司">
        <el-input v-model="user.school" class="input1" placeholder="请输入学校或公司名"></el-input>
      </el-form-item>

      <el-form-item label="会员等级">
        <el-select v-model="user.vid" clearable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="余额">
        <el-input v-model="user.balance" class="input1" placeholder="请输入金额"></el-input>
      </el-form-item>

      <el-form-item label="实验豆">
        <el-input v-model="user.bean" class="input1" placeholder="请输入实验豆"></el-input>
      </el-form-item>

      <el-form-item label="经验值">
        <el-input v-model="user.experience" class="input1" placeholder="请输入经验值"></el-input>
      </el-form-item>

      <el-form-item label="邀请码" :maxlength="8">
        <el-input v-model="user.code" class="input1" placeholder="请输入邀请码"></el-input>
      </el-form-item>
      <el-form-item label="个人简介" :maxlength="8">
        <el-input type="textarea" v-model="user.sign" maxlength="50" show-word-limit class="input1" placeholder="请输入个人简介"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align:center">
      <el-button type="primary" @click="submit">添加</el-button>
    </div>
  </div>
</template>

<script>
import { get_user_get, add_user_post } from "../axios_api/api"
export default {
  data() {
    return {
      options: [{ value: "普通用户", label: "普通用户" }, { value: "普通会员", label: "普通会员" }, { value: "高级会员", label: "高级会员" }],
      user: {
        username: "",
        password: "",
        password1: "",
        email: "",
        phone: "",
        occupation: "",
        school: "",
        vid: "普通用户",
        balance: "",
        bean: "",
        experience: "",
        code: "",
        sign: "",
      },
      vipdatas: [],
    }
  },
  mounted() {
    this.get_user();
  },
  methods: {
    submit() {
      // 正则验证用户名格式是否正确
      if (!/^[a-zA-Z]([a-zA-Z0-9]){5,16}$/.test(this.user.username)) {
        this.$message.error("用户名以字母开头，且长度不小于6位")
        return false;
      }
      // 正则验证密码格式是否正确
      if (!/^[a-zA-Z]([a-zA-Z0-9]){5,16}$/.test(this.user.password)) {
        this.$message.error("密码以字母开头，且长度不小于6位")
        return false;
      }
      // 判断两次密码是否一致
      if (this.user.password != this.user.password1) {
        this.$message.error("两次密码不一致")
        return false;
      }
      // 判断邮箱格式是否正确
      if (!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(this.user.email)) {
        this.$message.error("邮箱格式不正确")
        return false;
      }
      // 判断手机号格式是否正确
      if (!/^(13[0-9]{9})|(15[0-9][0-9]{8})|(18[0-9][0-9]{8})$/.test(this.user.phone)) {
        this.$message.error("手机号格式不正确")
        return false;
      }
      // 判断余额是否为数字类型
      if (this.user.balance) {
        if (!/\d.*/.test(this.user.balance)) {
          this.$message.error("余额只能为数字")
          return false
        }
      }
      // 判断实验豆是否为数字类型
      if (this.user.bean) {
        if (!/\d.*/.test(this.user.bean)) {
          this.$message.error("实验豆只能为数字")
          return false
        }
      }
      // 判断经验值是否为数字类型
      if (this.user.experience) {
        if (!/\d.*/.test(this.user.experience)) {
          this.$message.error("经验值只能为数字")
          return false
        }
      }

      // 将会员等级转换为id
      for (let i = 0; i < this.vipdatas.length; i++) {
        if (this.user.vid === this.vipdatas[i].grade) {
          this.user.vid = this.vipdatas[i].id
        }
      }
      let data = this.user
      // 使用封装axios发起post请求，添加用户
      add_user_post(data).then(resp => {
        if (resp.code === 200) {
          this.$router.push("/User/table")
          this.$message.success(resp.message)
        } else {
          this.$message.error(resp.message)
        }
      })
    },
    // 获取vip列表
    get_user() {
      get_user_get().then(resp => {
        this.vipdatas = resp.viplist;
      })
    },
  }
}
</script>

<style>
.elform {
  margin-top: 5px;
}
.input1 {
  width: 800px;
}
</style>